<template>
  <div>
    <van-nav-bar
      title="预约线下就诊"
      left-text="返回首页"
      right-text="我的订单"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-notice-bar
      left-icon="volume-o"
      text="请详细完善信息卡内容，保证地址详细准确，联系方式正确，再发起预约，如有任何问题，后果自负。"
    />
    <van-divider content-position="left">立即预约</van-divider>
    <van-popup v-model="show" position="bottom" round closeable close-icon="close" :style="{ height: '70%'}">
      <el-card>
        <van-cell-group>
          <van-field
            v-model="offlineForm.message"
            label="服务内容"
            placeholder="请详细描述需要的服务"
          />
        </van-cell-group>
        <el-row style="margin:10px 0 15px 0; padding:0 7px;"><el-button type="danger" size="mini">请选择就诊卡：</el-button></el-row>
        <van-address-list v-model="offlineForm.msgCardID" :list="message" style="border:1px solid pink; margin-bottom:20px" v-show="empty" />
        <van-empty description="未添加信息卡！请前往设置中添加。" v-show="!empty" />
        <!-- <span style="margin-left: 15px; font-size:14px;">医生：</span> -->
        <!-- <el-select v-model="offlineForm.doctorID" placeholder="请选择就诊医生">
          <el-option
            v-for="item in doList"
            :key="item._id"
            :label="
              '医生：' + item.name + '------' + '科室：' + item.department
            "
            :value="item._id"
          >
          </el-option>
        </el-select> -->
         <el-row style="margin:10px 0 15px 0; padding:0 7px;"><span style="font-size:14px">对应科室：</span><el-tag size="mini" type="success">{{department}}</el-tag></el-row>
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="addConfirm"
            >立即预约</van-button
          >
        </div>
      </el-card>
    </van-popup>
    <van-tree-select
      :items="items"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      @click-item="select"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      offlineForm: {
        msgCardID: '',
        doctorID: '',
        message: ''
      },
      empty: true,
      department: '',
      show: false,
      activeId: 1,
      activeIndex: 0,
      message: [],
      patientID: window.sessionStorage.getItem('id'),
      doList: [],
      items: [
        {
          text: '护士上门',
          id: 1,
          children: [
            { text: '留置PICC维护及护理', id: 1, department: '内科' },
            { text: '腹透管维护', id: 2, department: '内科' },
            { text: '静脉采血', id: 3, department: '内科' },
            { text: '口腔护理', id: 4, department: '外科' },
            { text: '留置导尿', id: 5, department: '外科' },
            { text: '拔除尿管', id: 6, department: '外科' },
            { text: '留置胃管', id: 7, department: '内科' },
            { text: '膀胱冲洗', id: 8, department: '内科' },
            { text: '外科伤口换药', id: 9, department: '外科' }
          ]
        },
        {
          text: '母婴护理',
          id: 2,
          children: [
            { text: '新生儿疾病筛查采集', id: 1, department: '妇产科' },
            { text: '新生儿居家护理指导', id: 2, department: '妇产科' },
            { text: '母乳喂养指导', id: 3, department: '妇产科' },
            { text: '新生儿沐浴', id: 4, department: '儿科' },
            { text: '新生儿皮胆红素测试采集', id: 5, department: '儿科' },
            { text: '新生儿护理采集套餐', id: 6, department: '儿科' }
          ]
        },
        {
          text: '核酸检测',
          id: 3,
          children: [{ text: '核酸检测采样', id: 1, department: '核酸检测门诊' }]
        },
        {
          text: '康复指导',
          id: 4,
          children: [
            { text: '疾病康复指导', id: 1, department: '综合' },
            { text: '疼痛评估与指导', id: 2, department: '综合' },
            { text: '帕金森居家医学康复', id: 3, department: '综合' },
            { text: '脑卒居家医学康复', id: 4, department: '综合' }
          ]
        }
      ]
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    },
    onClickRight () {
      this.$router.push('/myofflineorder')
    },
    async getMessage () {
      const { data: res } = await this.$http.get(
        '/user/msgcard/msgcardlist/' + this.patientID
      )
      if (res.status !== 200) return this.$Toast.fail('获取信息失败')
      this.message = res.cardList.map((v) => {
        return { name: v.name, tel: v.phone, id: v._id, address: v.address }
      })
      if (this.message.length == 0) {
        this.empty = false
      }
    },
    async getDoctorList () {
      const { data: res } = await this.$http.get('/server/doctor/list')
      if (res.status !== 200) return this.$Toast.faile('获取推荐列表失败')
      this.doList = res.doctorList
    },
    async addConfirm () {
      const { data: res } = await this.$http.post(
        '/api/offline/addofflineorder/' + this.patientID,
        this.offlineForm
      )
      if (res.status !== 200) return this.$Toast.fail('接口异常，预约失败')
      this.$Toast.success('预约成功，可前往我的订单查看状态')
      this.show = false
    },
    select (data) {
      this.offlineForm.message = data.text
      this.department = data.department
      this.offlineForm.doctorID = this.doList.find((item) => {
        return item.department == data.department
      })._id
      this.show = true
    }
  },
  mounted () {
    this.getMessage()
    this.getDoctorList()
  }
}
</script>

<style scoped>
/* .el-card {
  width: 95%;
  margin: 0 auto;
} */
.van-address-list__bottom {
  display: none;
}
.van-address-list {
  padding: 12px;
}
</style>
